<template>
  <div class="login-view">
    <header>
      <i @click="back"></i>
    </header>

    <main>
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item></van-swipe-item>
          <van-swipe-item></van-swipe-item>
          <van-swipe-item></van-swipe-item>
          <van-swipe-item></van-swipe-item>
          <van-swipe-item></van-swipe-item>
        </van-swipe>
      </div>

      <van-button round type="default" @click="goToLonginDetails">手机号登录/注册</van-button>

      <div class="list">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>

      <div class="agreement">
        <van-checkbox
          v-model="checked"
          shape="square"
          checked-color="#388587"
          icon-size="12"
        >同意《服务协议》《隐私政策》《儿童隐私政策》</van-checkbox>
      </div>
    </main>

    <footer>
      <a href="#javascript:;">LOFTER ID登录</a>
      <a href="#javascript:;">登录遇到的问题</a>
    </footer>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      checked: true
    };
  },
  methods: {
    back() {
      this.$router.back(); //后退
    },

    goToLonginDetails() {
      this.$router.push({
        name: "longin-details"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 100;
  background-color: #388587;

  header {
    width: 100vw;
    height: 5vh;

    i {
      width: 20px;
      height: 20px;
      margin: 20px;
      display: block;
      background-image: url("~@/assets/images/login/0Ow.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }

  main {
    width: 100vw;
    height: 89vh;

    .swipe {
      .van-swipe-item {
        width: 60vw;
        height: 45vh;
        margin: 10vh auto;
        background-color: #388587;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;

        &:nth-child(1) {
          background-image: url("~@/assets/images/login/YFF.png");
        }
        &:nth-child(2) {
          background-image: url("~@/assets/images/login/YFD.png");
        }
        &:nth-child(3) {
          background-image: url("~@/assets/images/login/cTR(1).png");
        }
        &:nth-child(4) {
          background-image: url("~@/assets/images/login/YFC.png");
        }
        &:nth-child(5) {
          background-image: url("~@/assets/images/login/YFG.png");
        }
      }
    }

    .van-button {
      width: 90vw;
      display: block;
      margin: 0 auto;
      font-size: 16px;
      font-weight: bolder;
    }

    .list {
      ul {
        width: 60vw;
        margin: 20px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
          width: 40px;
          height: 40px;
          border-radius: 999px;
          background-color: #609d9f;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;

          &:nth-child(1) {
            background-image: url("~@/assets/images/login/pQ-.png");
          }
          &:nth-child(2) {
            background-image: url("~@/assets/images/login/hN9.png");
          }
          &:nth-child(3) {
            background-image: url("~@/assets/images/login/9vL.png");
          }
          &:nth-child(4) {
            background-image: url("~@/assets/images/login/jbl.png");
          }
        }
      }
    }

    .agreement {
      width: 76vw;
      margin: 0 auto;
      font-size: 12px;

      ::v-deep .van-checkbox__label {
        color: #a6c8ca;
      }

      ::v-deep .van-icon {
        border: 0;
      }

      ::v-deep .van-icon-success {
        position: relative;

        &::before {
          height: 12px;
          position: absolute;
          top: 0;
          left: 0;
          border: 1px solid #a6c8ca;
        }
      }
    }
  }

  footer {
    width: 50vw;
    margin: 0 auto;
    font-size: 12px;
    display: flex;
    justify-content: space-between;

    a {
      color: #a6c8ca;
      text-decoration: underline;
    }
  }
}
</style>